﻿/*-------------------- 全局变量 START ----------------*/

var globalOpt = {
    validUrl:'/qtestin/testingUrl',
    submitUrl:'/qtestin/UserTestingServlet',
    templetXmlUrl:'/qtestin/readModel',
    templetXslUrl:'../../xsl/templet.xsl',
    uriPrompt:'apk或ipa文件的下载地址，如果未发布的app建议使用ftp地址。', //'应用程序下载地址或者手机网站URL',
    uriDescriptionPrompt:'应用下载及安装说明,如没有，可不填。',
    scenePrompt:'告诉测试人员，应该设想在什么场景下，或者以什么心态使用。',
    sceneTaskPrompt:'告诉测试人员，应该设想在什么场景下，或者以什么心态使用。',
    questionPrompt:'测试人员在测试时需执行的任务。比如：在商品列表的中点击“时装”栏目。',
    telPrompt:'多个联系电话用“,”号进行分隔！',
    emailPrompt:'请使用企业邮箱，以方便我们与您联系',
    otherRequirePrompt:'要求测试者在测试完后，回答一些软件体验上的问题。比如：你觉得哪些栏目是最有用的，哪些是毫无用处的。',
    taskTotalCount:10,
    taskCount:1,
    questionTotalCount:10,
    questionCount:1,
    sceneTaskDom:'<li><strong class="scene-task-title">任务1：</strong><textarea class="scene-task" id="scene-task" name="scene-task">{0}</textarea><a class="del scene-task-delete">删除</a></li>',
    questionDom:'<li><textarea class="question" placeholder="网站哪些地方让您失望了？">{0}</textarea><a class="del question-delete">删除</a></li>',
    tabTitleDom:'<li class="tab-title" tag={0}>{1}</li>',
    tabContentDom:'<div class="box"><p class="tab-content">{0}</p>' +
        '<div class="button" style="display: {1};"><button class="button_add tab-content-add" type="button" value="">添加为任务</button></div>' +
        '<div class="button" style="display: {2};"><button class="button_del tab-content-delete" type="button" value="">删除任务</button><span style="color:#C00;">已选任务</span></div></div>',
    tabData:[
        {key:'a', title:'第一印象', content:['看五秒钟的主页。然后，看远处和回答这个问题（不偷看！）：你还记得这个主页吗', '看看周围的主页，谈谈你认为该网站是关于：你在这里可以做什么，什么打动了你']},
        {key:'b', title:'购物', content:['2: 需要测试者回答的问题', '测试人员在录制视频中需执行的任务。']},
        {key:'c', title:'搜索', content:['3: 智能机使用年限', '这家公司的业务室什么']},
        {key:'d', title:'与竞争对手比较', content:['4: 看五秒钟的主页。然后，看远处和回答这个问题（不偷看！）：你还记得这个主页吗', '看看周围的主页，谈谈你认为该网站是关于：你在这里可以做什么，什么打动了你']},
        {key:'e', title:'游戏', content:['5: 体重不对', '特总部对']},
        {key:'f', title:'原型', content:['6: dsfasdfasdfasdfasdfasdfasdf', '游戏游戏游戏游戏游戏游戏游戏']}
    ],
    params:null,
    selectItem:[],
    validateRules:{
        uri:{
            required:true,
            uriRes:true
        },
        scene:{
            required:true
        },
        "scene-task-valid":{
            notEmpty:true
        },
        "question-valid":{
            notEmpty:true
        },
        "scene-task":{
            required:true
        },
        "person":{
            required:true,
            digits:true,
            min:1
        },
        "age-min":{
            required:true,
            digits:true,
            min:1,
            max:100,
            ageValid:true
        },
        "age-max":{
            required:true,
            digits:true,
            min:1,
            ageValid:true,
            max:100
        }
//        "age-valid":{
//            ageValid:true
//        }
    },
    subValidateRules:{
        name:{
            required:true,
            maxlength:20
        },
        tel:{
            required:true,
            isTel:true
        },
        im:{
            required:true
        },
        email:{
            required:true,
            email:true
        }
    },
    validateMessages:{
        uri:"请输入有效的 URL！"
    },
    subValidateMessages:{
//        name:"您的名字不能 为空！",
//        tel:"联系电话/手机 不能为空！",
//        im:"QQ/MSN 不能为空！",
//        email:"请输入有效的邮箱地址！"
    }
};

var dom = {
    uri:'#uri',
    uriType:'.uri-type',
    uriTypeCurr:'.uri-type.cur',
    uriDescription:'#uri-description',

    scene:'#scene',
    sceneTaskList:'#scene-task-list',
    sceneTask:'.scene-task',
    sceneTaskTitle:'.scene-task-title',
    sceneTaskAdd:'#scene-task-add',
    sceneTaskTemplet:'#scene-task-templet',
    sceneTaskDelete:'.scene-task-delete',

    sceneFlyoutElement:'.scene-flyout-element',
    tab:'.tab',
    tabTitleContainer:'#colorbox .tab-title-container',
    tabContentContainer:'#colorbox .tab-content-container',
    tabTitle:'#colorbox .tab-title',
    tabTitleCurr:'#colorbox .tab-title.cur',
    tabContent:'#colorbox .tab-content',
    tabContentAdd:'#colorbox .tab-content-add',
    tabContentDelete:'#colorbox .tab-content-delete',
    tabSelectAdd:'#colorbox .tab-select-add',
    tabSelectDelete:'#colorbox .tab-select-delete',

    question:'.question',
    questionList:'#question-list',
    questionAdd:'#question-add',
    questionDelete:'.question-delete',

    person:'#person',
    personSpan:'#personSpan',
    gender:'#gender',
    ageMin:'#age-min',
    ageMax:'#age-max',
    revenue:'#revenue',
    usageTerm:'#usage-term',
    otherRequire:'#other-require',
    platformType:'platform-type',

    name:'#colorbox #name',
    tel:'#colorbox #tel',
    im:'#colorbox #im',
    email:'#colorbox #email',
    company:'#colorbox #company',
    addr:'#colorbox #addr',
    domain:'#colorbox #domain',
    continue:'#colorbox .continue',

    successPrompt:'#colorbox .success-prompt',
    form:'.form',
    subForm:'#colorbox .sub-form',
    submit:'.submit',
    subSubmit:'#colorbox .sub-submit'
};

/*-------------------- 全局变量 END ------------------*/

/*-------------------- 函数 START --------------------*/

function getTabItem(key) {
    for (var item in globalOpt.tabData) {
        if (!globalOpt.tabData.hasOwnProperty(item)) continue;
        if (key == globalOpt.tabData[item].key) {
            return globalOpt.tabData[item];
        }
    }
    return null;
}

//初始化 DOM
function initDom() {
    $(dom.uri).val(globalOpt.uriPrompt);
    $(dom.uriDescription).val(globalOpt.uriDescriptionPrompt);
    $(dom.scene).val(globalOpt.scenePrompt);
    $(dom.sceneTaskList).empty();
    $(dom.person).val(5);
    $(dom.personSpan).html(parseInt($(dom.person).val()) * 30);
    $(dom.otherRequire).val(globalOpt.otherRequirePrompt);
    for (var i = 1; i <= globalOpt.taskCount; i++) {
        $(dom.sceneTaskList).append($.format(globalOpt.sceneTaskDom, ''));
    }
    $(dom.questionList).empty();
    for (var i = 1; i <= globalOpt.questionCount; i++) {
        $(dom.questionList).append($.format(globalOpt.questionDom, globalOpt.questionPrompt));
    }
    $(dom.sceneTask).each(function () {
        $(this).val(globalOpt.sceneTaskPrompt);
    });
    $(dom.sceneTaskTitle).each(function (index) {
        $(this).html('任务 ' + (index + 1) + '：');
    });

    xmlAcquire({
        type:'GET',
        xmlUrl:globalOpt.templetXmlUrl,
        xslUrl:globalOpt.templetXslUrl,
        error:function (err) {
            var a = 1;
        },
        success:function (obj) {
            globalOpt.tabData = JSON.parse(obj.output);
        }
    });
}

function addSceneTask(content) {
    globalOpt.taskCount++;
    $(dom.sceneTaskList).append($.format(globalOpt.sceneTaskDom, content == null ? '' : content));
    $(dom.sceneTaskTitle).each(function (index) {
        $(this).html('任务 ' + (index + 1 ) + '：');
    });
}

//解析数据
function getData() {
    var opt = {
        'uri':$(dom.uri).val(),
        'uriType':$(dom.uriTypeCurr).attr('tag'),
        'uriDescription':$(dom.uriDescription).val() == globalOpt.uriDescriptionPrompt ? '' : $(dom.uriDescription).val(),
        'scene':$(dom.scene).val(),
        'person':$(dom.person).val(),
        'gender':$(dom.gender).val(),
        'ageMin':$(dom.ageMin).val(),
        'ageMax':$(dom.ageMax).val(),
        'revenue':$(dom.revenue).val(),
        'usageTerm':$(dom.usageTerm).val(),
        'otherRequire':$(dom.otherRequire).val() == globalOpt.otherRequirePrompt ? '' : $(dom.otherRequire).val(),
        'platformType':$('input[name=' + dom.platformType + ']:radio:checked').val()
    };

    opt['taskList'] = [];
    opt['questionList'] = [];
    $(dom.sceneTask).each(function () {
        if (null != $(this).val() && $(this).val().length > 0)
            opt['taskList'].push($(this).val());
    });
    $(dom.question).each(function () {
        if (null != $(this).val() && $(this).val().length > 0)
            opt['questionList'].push($(this).val());
    });

    return opt;
}

//解析数据
function getSubData() {
    return {
        'name':$(dom.name).val(),
        'tel':$(dom.tel).val(),
        'im':$(dom.im).val(),
        'email':$(dom.email).val(),
        'company':$(dom.company).val(),
        'addr':$(dom.addr).val(),
        'domain':$(dom.domain).val()
    };
}

function selectCurr(dom, currDom, selectClass) {
    if (!selectClass) selectClass = 'cur';
    var curr = $(currDom).attr('tag');
    $(dom).each(function () {
        if (curr != $(this).attr('tag'))
            $(this).removeClass('cur');
    });
    $(currDom).addClass('cur');
}

function deleteEmptyTask() {
    //删除空的任务
    $(dom.sceneTask).each(function () {
        if (null != $(this).val() && $(this).val().length > 0 && $(this).val() != globalOpt.sceneTaskPrompt) {
            return;
        }
        globalOpt.taskCount--;
        $(this).parent().remove();
    });
    $(dom.sceneTaskTitle).each(function (index) {
        $(this).html('任务 ' + (index + 1) + '：');
    });
}
function deleteEmptyQuestion() {
    //删除空的任务
    $(dom.question).each(function () {
        if (null != $(this).val() && $(this).val().length > 0 && $(this).val() != globalOpt.questionPrompt) {
            return;
        }
        globalOpt.taskCount--;
        $(this).parent().remove();
    });
}

function validMinMax(min, max) {
    min = parseInt(min);
    max = parseInt(max);
    return min < max;
}

/*-------------------- 函数 END ----------------------*/

/*-------------------- 事件 START --------------------*/

function initEvent() {
    $(dom.uriDescription).live('focus', function () {
        if ($(this).val() == globalOpt.uriDescriptionPrompt)
            $(this).val('');
    });
    $(dom.uriDescription).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.uriDescriptionPrompt);
    });

    $(dom.uri).live('focus', function () {
        if ($(this).val() == globalOpt.uriPrompt)
            $(this).val('');
    });
    $(dom.uri).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.uriPrompt);
    });

    $(dom.scene).live('focus', function () {
        if ($(this).val() == globalOpt.scenePrompt)
            $(this).val('');
    });
    $(dom.sceneTask).live('focus', function () {
        if ($(this).val() == globalOpt.sceneTaskPrompt)
            $(this).val('');
    });
    $(dom.question).live('focus', function () {
        if ($(this).val() == globalOpt.questionPrompt)
            $(this).val('');
    });
    $(dom.otherRequire).live('focus', function () {
        if ($(this).val() == globalOpt.otherRequirePrompt)
            $(this).val('');
    });

    $(dom.scene).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.scenePrompt);
    });
    $(dom.sceneTask).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.sceneTaskPrompt);
    });
    $(dom.question).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.questionPrompt);
    });
    $(dom.otherRequire).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.otherRequirePrompt);
    });

    $(dom.tel).live('focus', function () {
        if ($(this).val() == globalOpt.telPrompt)
            $(this).val('');
    });
    $(dom.tel).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.telPrompt);
    });
    $(dom.email).live('focus', function () {
        if ($(this).val() == globalOpt.emailPrompt)
            $(this).val('');
    });
    $(dom.email).live('focusout', function () {
        if ($(this).val().length <= 0)
            $(this).val(globalOpt.emailPrompt);
    });

//    页面事件
    $(dom.uriType).live('click', function () {
        selectCurr(dom.uriType, this);
    });

    $(dom.sceneTaskAdd).live('click', function () {
        if (globalOpt.taskCount >= globalOpt.taskTotalCount) {
            $('#scene-task-error').css('visibility', 'visible');
            $('#scene-task-error').html('最多可以添加 ' + globalOpt.taskTotalCount + ' 个任务！');
            return;
        }
        addSceneTask(globalOpt.sceneTaskPrompt);
    });
    $(dom.questionAdd).live('click', function () {
        if (globalOpt.questionCount >= globalOpt.questionTotalCount) {
            $('#question-error').css('visibility', 'visible');
            $('#question-error').html('最多可以添加 ' + globalOpt.taskTotalCount + ' 个问题！');
            return;
        }
        globalOpt.questionCount++;
        $(dom.questionList).append($.format(globalOpt.questionDom, globalOpt.questionPrompt));
    });

    $(dom.sceneTaskDelete).live('click', function () {
        globalOpt.taskCount--;
        $(this).parent().remove();
        $(dom.sceneTaskTitle).each(function (index) {
            $(this).html('任务 ' + (index + 1) + '：');
        });
    });

    $(dom.questionDelete).live('click', function () {
        globalOpt.questionCount--;
        $(this).parent().remove();
    });

//    弹出框事件
    $(dom.sceneTaskTemplet).live('click', function () {
        $.colorbox({scrolling:true, overlayClose:false, width:'730px', close:"关闭", html:$(dom.sceneFlyoutElement + ':eq(0)').html(), initialWidth:'300px', initialHeight:'200px', opacity:0.2});
        $(dom.tabTitleContainer).empty();
        $(dom.tabContentContainer).empty();
        globalOpt.selectItem = [];

        //删除空的任务
        deleteEmptyTask();

        //从数据库获取数据
        for (var i in globalOpt.tabData) {
            $(dom.tabTitleContainer).append($.format(globalOpt.tabTitleDom, globalOpt.tabData[i].key, globalOpt.tabData[i].title));
        }
        for (var i in globalOpt.tabData[0].content) {
            $(dom.tabContentContainer).append($.format(globalOpt.tabContentDom, globalOpt.tabData[0].content[i], 'block', 'none'));
        }

        $(dom.tabTitle + ':eq(0)').addClass('cur');
    });

    $(dom.tabTitle).live('click', function () {
        selectCurr(dom.tabTitle, this);
        var item = getTabItem($(this).attr('tag'));
        if (null == item) return;
        $(dom.tabContentContainer).empty();
        for (var i in item.content) {
            if (existsSelectItem(item.content[i])) {
                $(dom.tabContentContainer).append($.format(globalOpt.tabContentDom, item.content[i], 'none', 'block'));
            } else {
                $(dom.tabContentContainer).append($.format(globalOpt.tabContentDom, item.content[i], 'block', 'none'));
            }
        }
    });

    function existsSelectItem(text) {
        for (var j = 0; j < globalOpt.selectItem.length; j++) {
            if (globalOpt.selectItem[j] == text) {
                return true;
            }
        }
        return false;
    }

    $(dom.tabContentAdd).live('click', function () {
        if (globalOpt.taskCount + globalOpt.selectItem.length >= globalOpt.taskTotalCount) {
            $('#colorbox .template-scene-task-error').css('visibility', 'visible');
            $('#colorbox .template-scene-task-error').html('最多可以添加 ' + (globalOpt.taskTotalCount - globalOpt.taskCount) + ' 个！');
            return;
        }

        globalOpt.selectItem.push($(this).parent().prev().html());
        $(this).parent().css("display", "none");
        $(this).parent().next().css("display", "block");
    });

    $(dom.tabContentDelete).live('click', function () {
        for (var i = 0; i < globalOpt.selectItem.length; i++) {
            if (globalOpt.selectItem[i] == $(this).parent().prev().prev().html()) {
                globalOpt.selectItem.splice(i, 1);
                break;
            }
        }
        $(this).parent().css("display", "none");
        $(this).parent().prev().css("display", "block");

        $('#colorbox .template-scene-task-error').css('visibility', 'collapse');
        $('#colorbox .template-scene-task-error').html('');
    });

    $(dom.tabSelectAdd).live('click', function () {
        for (var i = 0; i < globalOpt.selectItem.length; i++) {
            addSceneTask(globalOpt.selectItem[i]);
        }

        $.colorbox.close();
    });

    $(dom.tabSelectDelete).live('click', function () {
        $.colorbox.close();
    });

    $(dom.person).live('keyup', function () {
        if (!isNaN(parseInt($(this).val()))) {
            $(dom.personSpan).html(parseInt($(this).val()) * 30);
        }
    });

    $(dom.person).keypress(function () {
        if (event.keyCode < ($(dom.person).val().length > 0 ? 48 : 49) || event.keyCode > 57) {
            event.returnValue = false
        }
    });
    $(dom.ageMin).keypress(function () {
        if (event.keyCode < ($(dom.ageMin).val().length > 0 ? 48 : 49) || event.keyCode > 57) {
            event.returnValue = false
        }
    });
    $(dom.ageMax).keypress(function () {
        if (event.keyCode < ($(dom.ageMax).val().length > 0 ? 48 : 49) || event.keyCode > 57) {
            event.returnValue = false
        }
    });

    $(dom.submit).live('click', function () {
        deleteEmptyTask();
        deleteEmptyQuestion();
        $('#scene-task-error').css('visibility', 'collapse');
        $('#scene-task-error').html('');
        $('#question-error').css('visibility', 'collapse');
        $('#question-error').html('');

        if ($(dom.scene).val() == globalOpt.scenePrompt)
            $(dom.scene).val('');
        if ($(dom.uri).val() == globalOpt.uriPrompt)
            $(dom.uri).val('');

        globalOpt.params = null;
        if ($(dom.form).valid()) {
            globalOpt.params = getData();
            $.colorbox({scrolling:true, overlayClose:false, width:'700px', height:'500px;', close:"关闭", html:$(dom.sceneFlyoutElement + ':eq(1)').html(), initialWidth:'300px', initialHeight:'200px', opacity:0.2, onComplete:function () {
                $(dom.subForm).validate({
                    rules:globalOpt.subValidateRules,
                    messages:globalOpt.subValidateMessages
                });
                $(dom.tel).val(globalOpt.telPrompt);
                $(dom.email).val(globalOpt.emailPrompt);
            }});
        } else {
            //alert('数据错误！');
        }
    });

    $(dom.subSubmit).live('click', function () {
        if ($(dom.subForm).valid()) {
            var data = $.extend({},
                globalOpt.params,
                getSubData()
            );

            xmlAcquire({
                type:"POST",
                dataType:'text',
                context:this,
                xmlUrl:globalOpt.submitUrl,
                optionData:data,
                error:function (error) {
                    alert('Error');
                },
                success:function (obj) {
                    $(dom.successPrompt).css("display", "block");
                    $.colorbox.close();
                    $('#title-text').html("继续创建测试");
                }
            });
        }
    });

    $(dom.continue).live('click', function () {
        $('#title-text').html("继续创建测试");
    });
}

function initValidRules() {
    $.validator.addMethod("ageValid", function (value, element) {
        if ($(dom.ageMin).length > 0 && dom.ageMax.length > 0) {
            if (parseInt($(dom.ageMin).val()) > parseInt($(dom.ageMax).val())) {
                return false;
            }
        }
        return true;
    }, "年龄范围输入错误");
    $.validator.addMethod("notEmpty", function (value, element) {
        var curr, currArea;
        if ('scene-task-valid' == $(element).attr('id')) {
            curr = dom.sceneTask;
            currArea = dom.sceneTaskAdd;
        }
        if ('question-valid' == $(element).attr('id')) {
            curr = dom.question;
            currArea = dom.questionAdd
        }

        if ($(curr).length <= 0) {
            $(currArea).focus();
            return false;
        }
        return true;
    }, "至少要有一个任务和一个录制视频后回答的问题");
    $.validator.addMethod("isTel", function (value, element) {
//        var length = value.length;
//        var mobile = /^(1[3458]{1}\d{9})$/;
//        var tel = /^0\d{2,3}-?\d{7,9}$/;
//        return this.optional(element) || (tel.test(value) || mobile.test(value));
        var multiTelReg = /^((0\d{2,3}-?\d{7,9})|(1[3458]{1}\d{9}))(,\s*((0\d{2,3}-?\d{7,9})|(1[3458]{1}\d{9})))*$/;
        return this.optional(element) || (multiTelReg.test(value));

    }, "请正确填写您的联系电话");
    $.validator.addMethod("uriRes", function (value, element) {
        if (!value.match(/[a-zA-z]+:\/\/[^s]*/)) {
            return false;
        }
        var result = false;
        $.ajax({
            url:globalOpt.validUrl,
            data:{'url':value},
            async:false,
            error:function () {
                result = false;
            },
            success:function (data, textStatus, jqXHR) {
                if (data == "0") {
                    result = true;
                } else {
                    result = false;
                }
            }
        });
        return result;
    });
    $(dom.form).validate({
        onkeyup:false,
        onfocusin:false,
        //onfocusout:true,
        rules:globalOpt.validateRules,
        messages:globalOpt.validateMessages
    });
}
//validator.settings['onfocusout']
/*-------------------- 事件 END ----------------------*/

/*-------------------- 初始化 START ------------------*/

$(function () {
    $.support.cors = true;
    initDom();
    initEvent();
    initValidRules();
});

/*-------------------- 初始化 END --------------------*/